<template>
  <el-dialog
    v-model="dialogVisible"
    :title="props.title"
    :width="props.width"
    @close="hide"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <template #title>
      <div class="drawer-header">
        <div class="flex items-center dot" v-if="showDot">
          <div class="w-[5px] h-[5px] rounded-1/2 bg-[#3721FF]"></div>
          <span class="ml-2 drawer-title">{{ props.title }}</span>
        </div>
      </div>
    </template>
    <div class="">
      <slot></slot>
      <div class="px-4 py-4 mt-4 border-t rounded-lg h-[500px]">
        <el-tabs
          class="h-full rounded-lg"
          type="border-card"
          tabPosition="left"
          v-model="activeTab"
          @tab-click="handleTabsClick"
        >
          <template v-for="(item, index) in templatePageAllList" :key="index">
            <el-tab-pane :label="item.type" :name="item.type">
              <template #label>
                <template v-for="(itm, idx) in titleIconImgs" :key="idx">
                  <img
                    v-if="itm.type == item.type"
                    class="w-[26px] h-[26px] block"
                    :src="activeTab == item.type ? itm?.imgOn : itm?.imgOff"
                    alt=""
                  />
                </template>
                <p class="text-[14px] block flex title-ellipsis justify-center" :class="{ 'text-[#101010]': activeTab == item.type }">
                  {{ item?.title }}
                </p>
              </template>
              <div>
                <h4
                  class="text-[14px] text-[#101010] flex align-center mb-4 bg-[#F5F3FF] px-4 py-2 rounded-lg"
                >
                  <img
                    class="w-[20px] h-[20px] mr-2"
                    src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01H9Q83A1S9wOlNsBdW_!!1034622205.png"
                    alt=""
                  />
                  政策描述预览
                </h4>
                <div>
                  <div
                    v-html="item.detail"
                    v-if="item.type == activeTab"
                    class="h-[400px] overflow-y-auto"
                  ></div>
                </div>
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer el-dia-btn">
        <!-- <el-button @click="hide">取消</el-button> -->
        <el-button type="primary" color="#3721FF" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
defineOptions({ name: 'TemplatePolicyList' })
import { WebServicePolicyApi } from '@/api/website/webservicepolicy'
// template_policy_type
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict' //获取字典
const templatePolicyTypeList = ref(getStrDictOptions(DICT_TYPE.TEMPLATE_POLICY_TYPE))
console.log('templatePolicyTypeList', templatePolicyTypeList)
const titleIconImgs = ref([
  {
    type: '1',
    imgOn: 'https://img.alicdn.com/imgextra/i3/1034622205/O1CN01iGUsOW1S9wOmQFPY6_!!1034622205.png',
    imgOff: 'https://img.alicdn.com/imgextra/i3/1034622205/O1CN01IKUGRD1S9wOgXc9Pj_!!1034622205.png'
  },
  {
    type: '2',
    imgOn: 'https://img.alicdn.com/imgextra/i3/1034622205/O1CN01Sgafiv1S9wP55B1cn_!!1034622205.png',
    imgOff: 'https://img.alicdn.com/imgextra/i1/1034622205/O1CN014ZL6vJ1S9wP3y0jcd_!!1034622205.png'
  },
    {
    type: '3',
    imgOn: 'https://img.alicdn.com/imgextra/i4/1034622205/O1CN013hUIGM1S9wOmhCk4i_!!1034622205.png',
    imgOff: 'https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ezkecC1S9wOnG9aFB_!!1034622205.png'
  },
  
  {
    type: '4',
    imgOn: 'https://img.alicdn.com/imgextra/i4/1034622205/O1CN011wrMH31S9wOnCokTF_!!1034622205.png',
    imgOff: 'https://img.alicdn.com/imgextra/i2/1034622205/O1CN01CZL1l81S9wOnCqMDV_!!1034622205.png'
  },
  {
    type: '5',
    imgOn: 'https://img.alicdn.com/imgextra/i2/1034622205/O1CN01Tj9fpC1S9wOnuRs2F_!!1034622205.png',
    imgOff: 'https://img.alicdn.com/imgextra/i1/1034622205/O1CN01H0NcUT1S9wOkuMZBJ_!!1034622205.png'
  },
  
])
const emit = defineEmits(['close','selectedTemplatePolicy'])
const props = defineProps({
  showDot: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '800px'
  },
  title: {
    type: String,
    default: '模板政策列表'
  }
})
const templatePageAllList = ref([])
const selectedTemplatePolicy = ref({})
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: '',
  status: ''
})
const activeTab = ref('1')
const dialogVisible = ref(false)
const Sindex = ref(null)
const Sidx = ref(null)
const show = (index, idx) => {
  dialogVisible.value = true

}
const hide = () => {
  dialogVisible.value = false
  emit('close')
}
const submit = () => {
  emit('selectedTemplatePolicy',selectedTemplatePolicy.value)
  hide()
}
// 获取模板中心
const handleServicePolicyTemplatePageAll = async () => {
  const res = await WebServicePolicyApi.getServicePolicyTemplatePageAll(queryParams.value)
  console.log('模板中心', res)
  templatePageAllList.value = res.list
  if (templatePageAllList.value.length > 0) {
    activeTab.value = templatePageAllList.value[0].type
  }
}
//
const handleTabsClick = (item: any) => {
  // 获取点击下面的数据
  templatePageAllList.value.forEach((itm: any) => {
    if (item.paneName == itm.type) {
      selectedTemplatePolicy.value = itm
      console.log('item', itm)
    }
  })
}
onMounted(async () => {
  await handleServicePolicyTemplatePageAll()
  templatePageAllList.value.forEach((itm: any) => {
    if (itm.type==1) {
      selectedTemplatePolicy.value = itm
    }
  })
})
defineExpose({ show, hide })
</script>

<style scoped>
@import '@/styles/theme.scss';

:deep(.el-tabs__item) {
  /* 菜单平分整体高度 */
  height: calc(473px / 5);
  flex-direction: column;
  justify-content: center !important;
  padding: 20px;
}
.title-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* width: 60px; */
}
/* :deep(.el-tabs__item) . */
/* .el-tabs__item is-left is-active */
</style>
